.highlightGRID {
    display: grid;
    grid-template-areas: 
        "a b"
        "c d"
        "e f";
    gap: 20px;
    margin: 50px 250px 125px;
}

/* Gemeinsame Stile */
#H2Text1, #H2Text2, #H2Text3 {
    width: 100%;
    text-align: center;
}

#PhText1, #PhText2, #PhText3 {
    margin: 40px auto;
    text-align: center;
    color: #737379;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15pt;
    width: 100%;
}

.H2PhText1 { grid-area: a; margin-top: 85px; }
.HlVideoT1 { 
    grid-area: b; 
    margin-top: 70px; 
    border: 10px solid black; 
    border-radius: 40px; 
    
}

.H2PhText2 { grid-area: d; margin-top: 85px; }
.HlVideoT2 { 
    grid-area: c; 
    margin-top: 70px; 
    border: 10px solid black; 
    border-radius: 40px; 
}

.H2PhText3 { grid-area: e; margin-top: 85px; }
.HlVideoT3 { grid-area: f; 
    margin-top: 70px; 
    border: 10px solid black; 
    border-radius: 40px; }


/* Videos richtig skalieren */
#HlVideoT1, #HlVideoT2, #HlVideoT3 {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;
    display: flex;
    align-items: center;

}




/* Responsive Design */
@media (max-width: 2560px) {
    .HlVideoT1, .HlVideoT2, .HlVideoT3 {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
   
}

@media (max-width: 1440px) {
    .highlightGRID {
        margin: 40px 100px 100px;
        gap: 20px;
    }

    .HlVideoT1, .HlVideoT2, .HlVideoT3 {
        border: 8px solid black;
        border-radius: 30px;
    }

    #PhText1, #PhText2, #PhText3 {
        font-size: 14pt;
        width: 95%;
    }
    video {
        width: 100%;
        height: 90%;
        object-fit: cover;     /* Video füllt den Container ohne schwarze Balken */
    }
}

@media (max-width: 1024px) {
    .highlightGRID {
        grid-template-areas: 
            "a"
            "b"
            "c"
            "d"
            "e"
            "f";
        margin: 20px;
        gap: 15px;
    }

    .H2PhText2 { grid-area: c; margin-top: 85px; }
    .HlVideoT2 { grid-area: d; }

    #PhText1, #PhText2, #PhText3 {
        font-size: 14pt;
    }

    .HlVideoT1, .HlVideoT2, .HlVideoT3 {
        margin: auto;
        width: 80%;
        height: auto;          /* Automatische Höhe basierend auf der Breite */
        border-radius: 20px;
        border: 5px solid black;
    }
}


/* Responsive Design */
@media (max-width: 820px) {
    .highlightGRID {
        grid-template-areas: 
            "a"
            "b"
            "c"
            "d"
            "e"
            "f";
        margin: 20px;
        gap: 15px;
    }

    .H2PhText2 { grid-area: c; margin-top: 85px; }
    .HlVideoT2 { grid-area: d; }

    #PhText1, #PhText2, #PhText3 {
        font-size: 14pt;
    }

    .HlVideoT1, .HlVideoT2, .HlVideoT3 {
        border-radius: 20px;
        border: 5px solid black;
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .highlightGRID {
        grid-template-areas: 
            "a"
            "b"
            "c"
            "d"
            "e"
            "f";
        gap: 15px;
        
    }

    .H2PhText2 { grid-area: c; margin-top: 85px; }
    .HlVideoT2 { grid-area: d; }

    #PhText1, #PhText2, #PhText3 {

        width: 90%;

        font-size: 9pt;
    }

    .HlVideoT1, .HlVideoT2, .HlVideoT3 {
        border-radius: 20px;
        border: 5px solid black;
        width: 100%;



        position: relative;
        width: 100%;
        height: auto;          /* Automatische Höhe basierend auf der Breite */
        overflow: hidden; 
    }
    video {
        width: 100%;
        height: 100%;
        object-fit: cover;     /* Video füllt den Container ohne schwarze Balken */
    }
}

@media (max-width: 600px) {
    #PhText1, #PhText2, #PhText3 {
        font-size: 11pt;
        margin: 20px auto;
    }

    .HlVideoT1, .HlVideoT2, .HlVideoT3 {
        border-width: 4px;
        border-radius: 15px;
    }
}

@media (max-width: 400px) {
    #PhText1, #PhText2, #PhText3 {
        font-size: 9pt;
        width: 95%;
    }

    .HlVideoT1, .HlVideoT2, .HlVideoT3 {
        border-width: 3px;
        border-radius: 12px;
    }
    
}